﻿<div class="k-block divToolbar" style="margin: 5px">
    <div style="display: inline-block;">
        <select id="selArchive" style="width: 400px"></select>
    </div>
    <div style="display: inline-block;">
        <select id="selBureau"></select>
    </div>
    <div style="display: inline-block;">
        <select id="selGrade">
            <option value="1">小学</option>
            <option value="2">初中</option>
            <option value="3">高中</option>
            <option value="4">大学</option>
        </select>
    </div>
    <div style="height: 10px"></div>
    <a class="k-button" onclick="Export()"><span class="k-icon k-i-calendar"></span><span>导出结果</span></a>
    <form id="exportForm" method="post" action="/Analyses/ANB/@((bool)ViewBag.History?"ExportPB4Bureau":"ExportRB4Bureau")" target="_blank" style="display: none">
        <input type="hidden" name="aGuid" id="df_ArchiveGuid" />
        <input type="hidden" name="bGuid" id="df_BureauGuid" />
        <input type="hidden" name="gradeLevel" id="df_GradeLevel" />
        <input type="hidden" name="key" id="df_Key" />
    </form>
</div>
<div id="tbs_B4Bureau" style="margin: 5px">
    <ul>
        <li class="k-state-active">数字表</li>
        <li>饼状图</li>
        <li>柱状图</li>
    </ul>
    <div>
        <div id="grid_B4Bureau" style="text-align: center;"></div>
    </div>
    <div>
        <div id="chart_circles"></div>
    </div>
    <div id="bars">
        <div id="chart_bar_Excellent"></div>
        <div id="chart_bar_Good"></div>
        <div id="chart_bar_Pass"></div>
        <div id="chart_bar_Fail"></div>
        <div id="chart_bar_Qualified"></div>
        <div id="chart_bar_Average"></div>
    </div>
</div>

<script class="init">
    var his = "@(ViewBag.History)" == "True";
    if (his)
        LocatedMenu("历年报告", "机构报告");
    else
        LocatedMenu("数据分析", "机构分析");
    $("#tbs_B4Bureau").kendoTabStrip();

    $("#selArchive").kendoDropDownList({
        dataTextField: "Title",
        dataValueField: "Guid",
        dataSource: Whale.dataSource({
            url: "/Achievements/Archive/Gets",
            getParameters: function () {
                return {
                    aType: 2,
                    expired: his
                }
            }
        }),
        dataBound: function (e) {
            if (this.dataSource.data().length == 0) {
                this.setDataSource(new kendo.data.DataSource({
                    data: [{ Title: "暂无档案", Guid: "" }]
                }));
            }
        },
        change: function (e) {
            Filter();
        }
    });
    $("#selBureau").kendoDropDownList({
        dataTextField: "EduName",
        dataValueField: "Guid",
        dataSource: Whale.dataSource({
            url: "/Systems/Bureau/Gets",
            getParameters: function () {
                return { withme: true }
            }
        }),
        change: function (e) {
            Filter();
        }
    });
    $("#selGrade").kendoDropDownList({
        change: function (e) {
            Filter();
        }
    });

    var b4bureau = Whale.dataSource({
        url: "/Analyses/ANB/GetB4Bureau",
        getParameters: function () {
            return {
                aGuid: $("#selArchive").data("kendoDropDownList").value(),
                bGuid: $("#selBureau").data("kendoDropDownList").value(),
                gradeLevel: $("#selGrade").data("kendoDropDownList").value(),
                history:his
            }
        }
    });
    
    function Filter() {
        b4bureau.page(0);
        CreateCircles();
        CreateBars();
    }
</script>

<script class="grid">
    $("#grid_B4Bureau").kendoGrid({
        columns: [{
            title: "编码",
            field: "Code",
            width: 80
        }, {
            title: "机构名称",
            field: "EduName",
            attributes: { style: "text-align:left" },
            width: 150
        }, {
            title: "年段",
            field: "GradeLevel",
            template: "#=ShowGradeLevel(GradeLevel)#",
            width: 60
        }, {
            title: "样本数",
            field: "Samples",
            width: 65
        }, {
            title: "优秀数",
            field: "Excellent",
            width: 65
        }, {
            title: "优秀率",
            field: "ExcellentRate",
            format: "{0:p2}",
            width: 70
        }, {
            title: "良好数",
            field: "Good",
            width: 65
        }, {
            title: "良好率",
            field: "GoodRate",
            format: "{0:p2}",
            width: 70
        }, {
            title: "及格数",
            field: "Pass",
            width: 65
        }, {
            title: "及格率",
            field: "PassRate",
            format: "{0:p2}",
            width: 70
        }, {
            title: "不及格数",
            field: "Fail",
            width: 80
        }, {
            title: "不及格率",
            field: "FailRate",
            format: "{0:p2}",
            width: 80
        }, {
            title: "合格数",
            field: "Qualified",
            width: 65
        }, {
            title: "合格率",
            field: "QualifiedRate",
            format: "{0:p2}",
            width: 75
        }, {
            title: "平均分",
            field: "Average",
            format: "{0:d}",
            width: 65
        }, {}],
        dataSource: b4bureau,
        dataBound: function (e) {
            //让表头居中
            $("th.k-header").attr("style", "text-align:center; font-weight:bold;");
        }
    });
</script>

<script class="circle">
    function CreateCircles() {
        $("#chart_circles").empty();
        var data = b4bureau.data();
        if (data.length > 0) {
            $.each(data, function (i, o) {
                var obj = "<div id='char_circle_" + i + "' style='display:inline-block;'></div>";
                $(obj).appendTo("#chart_circles").kendoChart({
                    title: {
                        position: "top",
                        text: o.EduName
                    },
                    legend: {
                        visible: false
                    },
                    seriesDefaults: {
                        labels: {
                            visible: true,
                            background: "transparent",
                            template: "#= category #: \n #= kendo.format('{0:0.00}',value)#%",
                        }
                    },
                    series: [{
                        type: "pie",
                        data: [{
                            category: "优秀率",
                            value: o.ExcellentRate * 100,
                            color: "#76c6d2"
                        }, {
                            category: "良好率",
                            value: o.GoodRate * 100,
                            color: "#a1bd70"
                        }, {
                            category: "及格率",
                            value: o.PassRate * 100,
                            color: "#f58d76"
                        }, {
                            category: "不及格率",
                            value: o.FailRate * 100,
                            color: "#ffdd6c"
                        }]
                    }]
                });
            });
        }
    }
    $(function () {
        CreateCircles();
    });
</script>

<script class="bars">
    function CreateBars() {
        var data = b4bureau.data();
        $("#bars div").empty();

        $("#chart_bar_Excellent").kendoChart({
            dataSource: data,
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [{
                field: "Excellent",
                name: "优秀",
                color: "#76c6d2"
            }],
            categoryAxis: {
                field: "EduName",
                labels: {
                    //rotation: -45
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "N0"
            },
        });
        $("#chart_bar_Good").kendoChart({
            dataSource: data,
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [{
                field: "Good",
                name: "良好",
                color: "#76c6d2"
            }],
            categoryAxis: {
                field: "EduName",
                labels: {
                    //rotation: -45
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        });
        $("#chart_bar_Pass").kendoChart({
            dataSource: data,
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [{
                field: "Pass",
                name: "及格",
                color: "#76c6d2"
            }],
            categoryAxis: {
                field: "EduName",
                labels: {
                    //rotation: -45
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        });
        $("#chart_bar_Fail").kendoChart({
            dataSource: data,
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [{
                field: "Fail",
                name: "不及格",
                color: "#76c6d2"
            }],
            categoryAxis: {
                field: "EduName",
                labels: {
                    //rotation: -45
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        });
        $("#chart_bar_Qualified").kendoChart({
            dataSource: data,
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [{
                field: "Qualified",
                name: "合格",
                color: "#76c6d2"
            }],
            categoryAxis: {
                field: "EduName",
                labels: {
                    //rotation: -45
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        });
        $("#chart_bar_Average").kendoChart({
            dataSource: data,
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [{
                field: "Average",
                name: "平均分",
                color: "#76c6d2"
            }],
            categoryAxis: {
                field: "EduName",
                labels: {
                    //rotation: -45
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        });
    }

    $(function () {
        CreateBars();
    });
</script>

<script class="export">
    function Export() {
        $("#df_ArchiveGuid").val($("#selArchive").data("kendoDropDownList").value());
        $("#df_BureauGuid").val($("#selBureau").data("kendoDropDownList").value());
        $("#df_GradeLevel").val($("#selGrade").data("kendoDropDownList").value());
        $("#df_Key").val($("#txtKey").val());
        $("#exportForm").submit();
    }
</script>
